<template>
  <el-container class="home_container">
    <el-header class="header">
      <headerCom />
    </el-header>
    <el-container>
      <el-aside id="home_aside">
        <asideCom />
      </el-aside>
      <el-container>
        <el-main>
          <!-- 子路由入口 -->
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </el-container>
  <!-- 上传弹出组件实现 -->
</template>
<script setup>
import headerCom from '@/views/header/index.vue'
import asideCom from '@/views/aside/index.vue'
</script>

<style lang="scss" scoped>
.header {
  // max-height: 56px;
  // box-shadow: 0 3px 10px 0 rgb(0 0 0 / 6%);
  // box-sizing: border-box;
  // border: 1px solid silver;
  z-index: 100;
  box-shadow: 0 0 10px var(--el-border-color);

  width: 100%;
  // border-bottom: 1px solid silver;
}
#home_aside {
  // box-sizing: content-box;
  // margin-top: 10px;
  // border-right: 1px solid silver;
  box-shadow: 0 5px 10px var(--el-border-color);
  border-radius: 0 0 25px;
  padding-top: 20px;
}
.el-main {
  // margin: 10px;
  padding: 0 20px;
  height: calc(100vh - var(--el-header-height));
  // // box-shadow: 0 0 10px silver;
  // border-radius: 25px;
}
// @media screen and (max-width: 600px) {
//   #home_aside {
//     display: none;
//   }
//   .el-main {
//     box-shadow: none;
//   }
// }
</style>
